<template>
  <view class="header" :style="flag ? {marginTop: '90rpx'} : ''">
    <text class="back-box" @tap="goBack">返回</text>
    病虫害识别
  </view>
  <view class="videobox">
    <text class="light"></text>
    <view class="main">
      <camera device-position="back" flash="off" @error="error" class="camera-box"></camera>
    </view>
  </view>
  <view class="paizhao" @click="takePic">
    <view class="b">
      拍照识别
    </view>
  </view>
</template>

<script setup>
  import {computed} from "vue"
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  import {
    ref
  } from "vue";
  const imgSrc = ref("")
  //照片逻辑
  const takePic = () => {
    uni.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success(res) {
        imgSrc.value = res.tempFiles[0].tempFilePath;
        uni.navigateTo({
          url: `/pages/result/result?imgsrc=${imgSrc.value}`
        })
      },
      error(e) {
        console.log(e.detail);
      }
    })

  }





  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .header {
    background-color: #3F81C1;
    height: 80rpx;
    font-weight: 550;
    color: #fff;
    margin-top: 35rpx;
    font-size: 40rpx;
    text-align: center;
    line-height: 80rpx;
    position: relative;

    .back-box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 25rpx;
      font-size: 35rpx;
    }
  }

  .videobox {
    position: relative;
    width: 100%;
    height: 850rpx;
    background-color: #000;

    .light {}

    .main {
      position: absolute;
      top: 100rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 700rpx;
      height: 700rpx;
      border: 1px dashed #fff;

      .camera-box {
        width: 100%;
        height: 100%;
      }
    }
  }

  .paizhao {
    position: relative;
    box-sizing: border-box;
    margin: 40rpx auto 0;
    background-color: #3F81C1;
    color: #fff;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    text-align: center;
    font-size: 40rpx;
    letter-spacing: 20rpx;
    font-weight: 550;

    .b {
      position: absolute;
      top: 50%;
      transform: translateY(-53%);
      width: 80%;
      height: 50%;
      padding: 0 30rpx;

    }
  }
</style>
